<template>
  <yd-layout>
    <!-- 内容区域 -->
     <!-- enter-active-class="animated slideInRight" leave-active-class="animated slideOutLeft" -->
    <transition>
      <router-view></router-view>
    </transition>

    <!-- 底部导航 -->
    <yd-tabbar slot="tabbar">
      <yd-tabbar-item title="精选" link="/hotspot">
        <img class="u-home-icon" slot="icon" :src="require(`./assets/tabBar/icon_collect${currentPath === '/hotspot' ? '_hl' : ''}.png`)">
      </yd-tabbar-item>
      <yd-tabbar-item title="分类" link="/classify">
        <img slot="icon" :src="require(`./assets/tabBar/btn_classify${currentPath === '/classify' ? '_hl' : ''}.png`)">
      </yd-tabbar-item>
      <yd-tabbar-item title="首页" link="/">
        <img class="u-home-icon" slot="icon" :src="require(`./assets/tabBar/btn_home${currentPath === '/' ? '_hl' : ''}.png`)">
      </yd-tabbar-item>
      <yd-tabbar-item title="购物车" link="/cart">
        <img slot="icon" :src="require(`./assets/tabBar/btn_shopping${currentPath === '/cart' ? '_hl' : ''}.png`)">
      </yd-tabbar-item>
      <yd-tabbar-item title="我的" link="/my">
        <img slot="icon" :src="require(`./assets/tabBar/btn_person${currentPath === '/my' ? '_hl' : ''}.png`)">
      </yd-tabbar-item>
    </yd-tabbar>

  </yd-layout>
</template>

<script>
  export default {
    data() {
      return {
        currentPath: '',
        currentTitle: ''
      }
    },
    created() {
      this.currentPath = this.$route.path
    },
    watch: {
      $route(to, from) {
        this.currentPath = to.path
        this.currentTitle = to.meta.title
      }
    }
  }
</script>


<style lang="scss">
  .yd-tabbar {
    .router-link-active {
      .yd-tabbar-txt {
        color: #ef5c6e;
      }
    }
  }
</style>
